<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Input - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Input - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">
        <ion-list>
          <ion-item>
            <ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
          </ion-item>

          <ion-item>
            <ion-input placeholder="Placeholder"></ion-input>
          </ion-item>

          <ion-item lines="full" id="fullItem">
            <ion-input id="fullInput" placeholder="Full"></ion-input>
          </ion-item>

          <ion-item lines="inset" id="insetItem">
            <ion-input id="insetInput" placeholder="Inset"></ion-input>
          </ion-item>

          <ion-item lines="none" id="noneItem">
            <ion-input id="noneInput" placeholder="None"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Default Label</ion-label>
            <ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Clear Input</ion-label>
            <ion-input
              clear-input
              value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"
            ></ion-input>
          </ion-item>

          <ion-item color="dark">
            <ion-label position="floating">Floating</ion-label>
            <ion-input checked></ion-input>
          </ion-item>

          <ion-item>
            <ion-label position="fixed">Type #</ion-label>
            <ion-input type="number" value="333"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label position="stacked">Password</ion-label>
            <ion-input type="password"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label position="stacked">Placeholder</ion-label>
            <ion-input placeholder="Enter Something"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Disabled</ion-label>
            <ion-input id="dynamicDisabled" value="Disabled" disabled></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Readonly</ion-label>
            <ion-input id="dynamicReadonly" value="Readonly" readonly></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Slot</ion-label>
            <ion-input slot="start" value="Start"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Toggle</ion-label>
            <ion-toggle checked slot="end"></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label position="fixed">Type #</ion-label>
            <div type="number" value="333" class="input input-md hydrated">
              <!---->
              <input
                aria-disabled="false"
                autocapitalize="none"
                autocomplete="off"
                autocorrect="off"
                autofocus="false"
                class="native-input native-input-md"
                spellcheck="false"
                type="number"
              />
              <button type="button" class="input-clear-icon" hidden=""></button>
            </div>
          </ion-item>
        </ion-list>

        <div class="ion-text-center">
          <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')"> Toggle Disabled </ion-button>

          <ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
            Toggle Readonly
          </ion-button>
        </div>

        <ion-item>
          <ion-label>Clear Input</ion-label>
          <ion-input
            clear-input
            value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"
          ></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>Clear On Edit</ion-label>
          <ion-input
            clear-on-edit
            value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"
          ></ion-input>
        </ion-item>

        <ion-item style="max-width: 250px">
          <ion-input value="Narrow input"></ion-input>
          <ion-label class="ion-text-right">Left</ion-label>
        </ion-item>

        <ion-item style="max-width: 250px">
          <ion-label>Right</ion-label>
          <ion-input class="ion-text-right" value="Narrow input"></ion-input>
        </ion-item>
      </ion-content>

      <script>
        document.querySelector('ion-input').addEventListener('ionBlur', (ev) => {
          console.log(ev);
        });

        function toggleBoolean(id, prop) {
          var el = document.getElementById(id);

          var isTrue = el[prop] ? false : true;
          el[prop] = isTrue;
          console.log('in toggleBoolean, setting', prop, 'to', isTrue);
        }
      </script>
    </ion-app>
  </body>
</html>
